<script setup>
    import {ref} from 'vue'
    
    //1.定义一个接受表单的数据的对象即可 (可以是变量) 数据都是响应式
    let user = ref({
        account:null,
        password: null
    })

    //2.表单中添加 v-model="数据的key" [双向绑定]

    //登录逻辑
    let login =()=>{
        alert(JSON.stringify(user.value));
    }

    let clean = ()=>{
        user.value = {};
    }

    /**
     * 双向绑定
     *    作用: 接收表单标签数据!
     *    语法: 1. 定义接收数据对象(响应式数据) 2. 表单标签v-model="数据的key"
     *    双向:  
     *          第一个方向: 表单影响对象数据  表单输入和删除或者修改数据,对应的对象数据就会改变!
     *          第二个方向: 对象数据影响表单, js代码删除对象数据表单也会对应调整!
     * 
     */
</script>

<template>
  <div>
     账号: <input  type="text"  name="account"  v-model="user.account" placeholder="请您输入账号!" > </input>  <br>
     密码: <input  type="password"  name="password" v-model="user.password"  placeholder="请您输入密码!" > </input>  <br>
     <button @click="login()">登录</button> <button @click="clean">重置</button>
  </div>
</template>

<style scoped>

</style>